<script lang="tsx">
import { defineComponent, onMounted } from 'vue';
import Empty from '../empty.vue';
interface Props {
  latestDynamicsData: any[];
  handleViewDetail: (data: any) => void;
}

export default defineComponent({
  name: 'LatestNews',
  props: {
    latestDynamicsData: {
      type: Array as () => any[],
      default: () => []
    },
    handleViewDetail: {
      type: Function,
      required: true
    }
  },
  setup(props: Props) {

    onMounted(() => {
    });
    return () => (
      <div class="latest-news-list">
        {props.latestDynamicsData?.length > 0 ? props.latestDynamicsData?.map((item, index) => (
          <div key={item.id} class="latest-news-item" onClick={() => props.handleViewDetail(item)}>
              <div class={['news-icon', index < 3 ? 'news-icon-top-three' : '']}>{index < 3 ? index + 1 : ''}</div>
            <div class="news-content">
              <h3 class="news-title">{item.title}</h3>
              <span class="news-date">{item.date}</span>
            </div>
          </div>
        )) : <Empty />}
      </div>
    );
  }
})
</script>

<style scoped>

.latest-news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.latest-news-item {
  display: flex;
  gap: 11px;
  transition: all 0.3s ease;
  cursor: pointer;
  padding-bottom: 16px;
  border-bottom: 1px solid #DCDFE6;
  &:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
}
.news-icon-top-three {
  gap: 8px;
}

.latest-news-item:hover {
  transform: translateX(4px);
}

.news-icon {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: #AEAEAE;
  border-radius: 50%;
  margin-top: 6px;
}
.news-icon-top-three {
  background: #FB9A0E;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 16px;
  font-weight: 500;
}

.news-content {
  flex: 1;
}

.news-title {
  font-size: 14px;
  font-weight: 500;
  color: #191919;
  margin: 0 0 8px 0;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-date {
  font-size: 14px;
  color: #AEAEAE;
}
</style>
